<template>
	<div class="layout-form fixed-layout clue-detail">
		<div class="fixed-section">
			<div class="title">
				<em v-if="clueDetail.clueInfo.clueCode">编号：{{clueDetail.clueInfo.clueCode}}</em>
			</div>
			<button class="btn-delete" v-if="clueDetail.clueInfo.clueStatus == 0||clueDetail.clueInfo.clueStatus == 3" @click="showInvalidLayer">作废</button>
			<button @click="showProposalLayer" v-if="clueDetail.clueInfo.clueStatus == 0||clueDetail.clueInfo.clueStatus == 3">提案</button>
			<button @click="showCancelProposalLayer" v-else-if="clueDetail.clueInfo.clueStatus == 1">取消提案</button>
			<button @click="editClue" v-if="clueDetail.clueInfo.clueStatus == 0">编辑</button>
			<button class="btn-cancel" @click="goBack">返回</button>
		</div>
		<div class="tab">
			<div class="tab-title">
				<div class="tab-item" :class="{'tab-active':tabIndex==0}" @click="tabClick(0)">案件线索</div>
				<div class="tab-item" :class="{'tab-active':tabIndex==1}" @click="tabClick(1)">线索轨迹</div>
			</div>
			<div class="tab-content section-form">
				<div class="tab-list" :class="{'tab-active':tabIndex==0}">
					<el-form :inline="true" :model="clueDetail">
						<div class="section">
							<div class="panel-title">
								<span class="title">客户信息</span>
							</div>
							<div class="panel-content">
								<template v-for="(item,index) in clueDetail.customer">
									<div class="panel-list">
										<div class="pos-left">
											<span class="count">{{(index+1)}}</span>
										</div>
										<el-form-item label="借款合同" prop="reflectName">
											<el-input v-model="item.reflectName" disabled></el-input>
										</el-form-item>
										<el-form-item label="信审合同" prop="reflectSex">
											<el-input v-model="item.reflectSex" disabled></el-input>
										</el-form-item>
										<el-form-item label="客户姓名" prop="reflectName">
											<el-input v-model="item.reflectName" disabled></el-input>
										</el-form-item>
										<el-form-item label="客户电话" prop="reflectPhone">
											<el-input v-model="item.reflectPhone" disabled></el-input>
										</el-form-item>
										<el-form-item label="客户身份证号" prop="reflectIdentity">
											<el-input v-model="item.reflectIdentity" disabled></el-input>
										</el-form-item>
										<el-form-item label="授信时间" prop="creditDate">
											<el-input v-model="item.creditDate" disabled></el-input>
										</el-form-item>
										<el-form-item label="授信金额" prop="creditMoney">
											<el-input v-model="item.creditMoney" disabled></el-input>
										</el-form-item>
										<el-form-item label="借款时间" prop="borrowDate">
											<el-input v-model="item.borrowDate" disabled></el-input>
										</el-form-item>
										<el-form-item label="借款金额" prop="borrowMoney">
											<el-input v-model="item.borrowMoney" disabled></el-input>
										</el-form-item>
										<el-form-item label="客户经理是否变动" prop="managerChange">
											<el-input v-model="item.managerChange" disabled></el-input>
										</el-form-item>
										<el-form-item label="当前客户经理" prop="customerManager">
											<el-input v-model="item.customerManager" disabled></el-input>
										</el-form-item>
										<el-form-item label="当前客户经理电话" prop="customerManagerPhone">
											<el-input v-model="item.customerManagerPhone" disabled></el-input>
										</el-form-item>
										<el-form-item label="历史客户经理" prop="historycustomerManager">
											<el-input v-model="item.historycustomerManager" disabled></el-input>
										</el-form-item>
										<el-form-item label="所属营业部" prop="salesDeptCode">
											<el-input v-model="item.salesDeptCode" disabled></el-input>
										</el-form-item>
										<el-form-item label="商户id" prop="reflectId1">
											<el-input v-model="item.reflectId1" disabled></el-input>
										</el-form-item>
										<el-form-item label="商户名称" prop="reflectName1">
											<el-input v-model="item.reflectName1" disabled></el-input>
										</el-form-item>
									</div>
								</template>
							</div>
						</div>
						<div class="section">
							<div class="panel-title">
								<span class="title">举报人信息</span>
							</div>
							<div class="panel-content">
								<el-form-item label="举报人姓名" prop="reflectName">
									<el-input v-model="clueDetail.clueInformer.reflectName" disabled></el-input>
								</el-form-item>
								<el-form-item label="举报人电话" prop="reflectPhone">
									<el-input v-model="clueDetail.clueInformer.reflectPhone" disabled></el-input>
								</el-form-item>
								<el-form-item class="form-block" label="备注" prop="remark">
									<el-input type="textarea" v-model="clueDetail.clueInformer.remark" disabled></el-input>
								</el-form-item>
							</div>
						</div>
						<div class="section">
							<div class="panel-title">
								<span class="title">被举报人信息</span>
							</div>
							<div class="panel-content table-tool">
								<el-table :data="clueDetail.caseBeReported" border style="width: 100%">
									<el-table-column label="序号" width="50">
										<template slot-scope="scope">
											<div class="count">{{(scope.$index+1)}}</div>
										</template>
									</el-table-column>
									<el-table-column label="被举报人姓名" prop="beReportedName"></el-table-column>
									<el-table-column label="被举报人手机" prop="beReportedPhone"></el-table-column>
									<el-table-column label="被举报人身份证" prop="beReportedIdentity"></el-table-column>
									<el-table-column label="被举报人所属公司" prop="beReportedOrg"></el-table-column>
									<el-table-column label="被举报人所属部门" prop="beReportedDept"></el-table-column>
									<el-table-column label="被举报人所属营业部" prop="beReportedBusiness"></el-table-column>
								</el-table>
							</div>
						</div>
						<div class="section">
							<div class="panel-title">
								<span class="title">其它信息</span>
							</div>
							<div class="panel-content">
								<el-form-item label="来源渠道" prop="source">
									<el-input v-model="clueDetail.clueInfo.source" disabled></el-input>
								</el-form-item>
								<el-form-item label="产品类型" prop="product">
									<el-input v-model="clueDetail.clueInfo.product" disabled></el-input>
								</el-form-item>
								<el-form-item label="线索获取日期" prop="clueDate">
									<el-input v-model="clueDetail.clueInfo.clueDate" disabled></el-input>
								</el-form-item>
								<el-form-item class="form-block" label="反馈详情" prop="reflectContent">
									<el-input type="textarea" v-model="clueDetail.clueInfo.reflectContent" disabled></el-input>
								</el-form-item>
								<el-form-item class="form-block" label="备注" prop="remark">
									<el-input type="textarea" v-model="clueDetail.clueInfo.remark" disabled></el-input>
								</el-form-item>
								<el-form-item class="form-block" label="举证资料">
									<el-table :data="clueDetail.evidenceList" border style="width: 100%">
										<el-table-column fixed="right" label="操作" width="108">
											<template slot-scope="scope">
												<a v-if="scope.row.fileUrl" :href="scope.row.fileUrl" :download="scope.row.fileName">下载</a>
												<a class="disable">删除</a>
											</template>
										</el-table-column>
										<el-table-column label="序号" width="50">
											<template slot-scope="scope">
												<div class="count">{{(scope.$index+1)}}</div>
											</template>
										</el-table-column>
										<el-table-column label="上传时间" width="155" prop="cdate"></el-table-column>
										<el-table-column label="文件名称" prop="fileName"></el-table-column>
										<el-table-column label="备注" prop="remark"></el-table-column>
									</el-table>
								</el-form-item>
							</div>
						</div>
					</el-form>
				</div>
				<div class="tab-list" :class="{'tab-active':tabIndex==1}">
					<div class="step-content">
						<div class="step-item" v-for="item in clueDetail.caseTrackList" v-if="item.cdate">
							<span class="step-date">{{filter.formatDate(item.cdate).split(' ')[0]}}</span>
							<span class="step-week">{{filter.getDay(item.cdate)}}</span>
							<span class="step-time">{{filter.formatDate(item.cdate).split(' ')[1]}}</span>
							<span class="step-con">
								<div class="con-item" v-if="item.content">{{item.content}}</div>
								<div class="con-item">{{item.remark}}</div>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 作废 -->
		<layer :data="invalid.layer" @on-ok="clueInvalid">
			<div class="alert alert-warning">
				<i class="icon i-warning"></i>
				<p>作废后，此线索将不可恢复</p>
			</div>
			<el-form :model="invalid.form">
				<el-form-item class="is-required" label="作废原因" prop="abolishInfo">
					<el-input type="textarea" v-model="invalid.form.abolishInfo" placeholder="请输入..."></el-input>
				</el-form-item>
			</el-form>
		</layer>
		<!-- 提案 -->
		<layer :data="proposalLayer" @on-ok="clueProposal"></layer>
		<!-- 取消提案 -->
		<layer :data="cancelProposalLayer" @on-ok="cancelProposal"></layer>

		<!-- 添加证据 -->
		<layer :data="addInfoLayer" @on-ok="infoSave">
			<div class="el-form-item is-required">
				<label for="reason" class="el-form-item__label">{{addInfoLayer.text}}</label>
				<div class="el-form-item__content">
					<el-upload class="upload-demo" :action="addInfoLayer.uploadUrl" :on-success="uploadSuccess" :on-remove="removeUploadFile"
					 :before-upload="beforeUpload" :file-list="addInfoLayer.fileList">
						<button class="btn-upload">
							<i class="icon i-upload"></i>
							<span>上传文件</span>
						</button>
						<!-- <div slot="tip" class="el-upload__tip">上传文件大小不能超过100MB</div> -->
					</el-upload>
				</div>
			</div>
			<el-form :ref="addInfoLayer.ref" :model="addInfoLayer.form">
				<el-form-item v-if="infoType === 'clueRecords'" label="内容" prop="content">
					<el-input type="textarea" v-model="addInfoLayer.form.content" placeholder="请输入请填写内容"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input type="textarea" v-model="addInfoLayer.form.remark" placeholder="请输入请填写备注"></el-input>
				</el-form-item>
			</el-form>
		</layer>
		<!-- 提案审批 -->
		<!-- <layer class="layer-form-inline" :data="proposalLayer" @on-ok="saveProposal">
			<div class="alert alert-warning">
				<i class="icon i-warning"></i>
				<p>请按照由S→C→B→A的风险等级，依次进行填写！</p>
			</div>
			<el-form :inline="true">
				<el-form-item label="风险类别" class="is-required">
					<el-select v-model="riskCategoryForm.id" placeholder="请选择风险类别" @change="riskCategoryChange">
						<el-option v-for="item in dicts.riskCategory" :key="item.value" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="风险类型" class="is-required">
					<el-select v-model="riskTypeForm.value" placeholder="请选择风险类型" @change="riskTypeChange" no-data-text="请先选择风险类别">
						<el-option v-for="item in riskTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="风险等级" class="is-required">
					<el-select v-model="riskLevelForm.value" placeholder="请选择风险等级" @change="riskLevelChange" no-data-text="请先选择风险类型">
						<el-option v-for="item in riskLevelList" :key="item.id" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="riskDisposeDate" label="处理时长" class="is-required">
					<el-select v-model="riskDisposeDateForm.value" placeholder="请选择处理时长" no-data-text="请先选择风险等级">
						<el-option v-for="item in riskDisposeDateList" :key="item.id" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-block is-required" prop="riskDetails" label="详情描述">
					<el-select v-model="riskDetailsForm.value" placeholder="请选择详情描述" no-data-text="请先选择风险类型">
						<el-option v-for="item in riskDetailsList" :key="item.id" :label="item.name" :value="item.name"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</layer> -->
	</div>
</template>
<script>
	import detailClue from './detail'
	export default {
		name: 'detailClue',
		mixins: [detailClue]
	}
</script>